import type {
  EChartsElementEvent,
  EchartsLineSeriesOption,
  EChartsOption,
  EchartsTitleOption,
} from '../../types/interfaces'

export interface LineChartProps {
  /**
   * 图表容器ID
   */
  id: string
  /**
   * x轴分类数据
   */
  categories: string[]
  /**
   * y轴数值数据
   */
  values: number[]
  /**
   * 图表高度
   */
  height?: string
  /**
   * 图表宽度
   */
  width?: string
  /**
   * 图表标题
   */
  title?: string
  /**
   * 标题样式配置
   */
  titleOptions?: EchartsTitleOption
  /**
   * 系列配置
   */
  seriesOptions?: EchartsLineSeriesOption
  /**
   * 自定义ECharts配置
   */
  options?: EChartsOption
  /**
   * 是否显示面积图
   */
  showArea?: boolean
  /**
   * 是否平滑曲线
   */
  smooth?: boolean
  /**
   * 是否显示数据点
   */
  showSymbol?: boolean
  /**
   * 线条颜色
   */
  lineColor?: string
  /**
   * 面积图颜色
   */
  areaColor?: string
  /**
   * 格式化工具提示中的名称
   */
  formatTooltipName?: (name: string) => string
  /**
   * 是否渲染空数据图表
   */
  renderEmpty?: boolean
  /**
   * 点击事件回调
   */
  onClick?: (params: ChartClickParams, event: EChartsElementEvent | undefined) => void
}

export interface ChartClickParams {
  chartId: string
  dataIndex: number
  name: string
  value: any
  seriesName: string
  rawData: any
}

export const DEFAULT_LINE_CHART_PROPS: Partial<LineChartProps> = {
  height: '300px',
  width: '100%',
  showArea: false,
  smooth: true,
  showSymbol: true,
  lineColor: '#5470c6',
  areaColor: 'rgba(84, 112, 198, 0.3)',
  renderEmpty: true,
}
